<template>
  <div>
    <router-view></router-view>
    <div class="circleDiv">
      <div class="circleList">
        <router-link to="/guide/Enconer" ><div @click="aaa(0)" class="changeDiv changeDiv1"></div></router-link>
        <router-link to="/guide/translate-guide"><div @click="aaa(1)" class="changeDiv"></div></router-link>
        <router-link to="/guide/speak" ><div @click="aaa(2)" class="changeDiv"></div></router-link>
        <router-link to="/common" ><div @click="aaa(3)" class="changeDiv"></div></router-link>
        <!--<div @click="aaa">esjkh ehruweh </div>-->
      </div>
    </div>
  </div>


</template>
<script>
    export default{
        name:'guide',
        data: function(){
          return {
            'isshow': false
          }
        },
      mounted:function(){
        this.$router.push({path:'/guide/Enconer'});
      },
        methods:{
          aaa:function(j){
            var changeDiv=document.getElementsByClassName("changeDiv");
//            changeDiv[0].style.backgroundColor="#7FA8FF";

              if(j==0){
                for(var i=0;i<changeDiv.length;i++) {
                  changeDiv[i].style.backgroundColor = "#D2D2D2";
                }
                changeDiv[0].style.backgroundColor="#7FA8FF";
              }
              else if(j==1){
                for(var i=0;i<changeDiv.length;i++) {
                  changeDiv[i].style.backgroundColor = "#D2D2D2";
                }
                changeDiv[1].style.backgroundColor="#FF7664";

              }else if(j==2){
                for(var i=0;i<changeDiv.length;i++) {
                  changeDiv[i].style.backgroundColor = "#D2D2D2";
                }
                changeDiv[2].style.backgroundColor="#BD86F0";

              }else{
                for(var i=0;i<changeDiv.length;i++) {
                  changeDiv[i].style.backgroundColor = "#D2D2D2";
                }
                changeDiv[3].style.backgroundColor="#FF7664";
//                this.$emit("toAppVue");
              }

            }
//            changeDiv[1].style.backgroundColor="#FF7664"
          }

    }
</script>
<style >
  /*.guide{*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-content: center;*/
    /*background-color: #FCFCFC;*/
    /*padding: 200px 0 260px 0;*/
    /*/!*border: 1px solid red;*!/*/
    /*color:#8E8E8E*/
  /*}*/
.circleDiv{
  position: absolute;
  top: 1200px;
  left: 42%;
  z-index: 999;
}
  .circleList{
    display: flex;
    flex-direction: row;
    justify-content:center;
    background-color:#FCFCFC ;
  }
  .changeDiv{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 0 10px;
    background-color: #D2D2D2;
  }
  .changeDiv1{
    background-color: #7FA8FF;
  }
  .change-frt{
    background-color: #7FA8FF;
  }
  .change-sec{
    background-color: #FF7664;
  }
  .change-thd{
    background-color: #BD86F0;
  }
</style>
